<template lang="">
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="conId" label="问卷ID" width="180">
            </el-table-column>
            <el-table-column prop="conTitle" label="问卷名">
            </el-table-column>
            <el-table-column label="问卷类型">
                <template slot-scope="scope">
                    <el-tag :type="handleType(scope.row.questionnaireType)">
                        {{ handleTypeText(scope.row.questionnaireType) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="conDate" label="发布日期">
            </el-table-column>
            <el-table-column prop="conPublish" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="tagType(scope.row.conPublish)" disable-transitions>{{tag(scope.row.conPublish)}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看  <--能传两个参数 -->
                    <!-- <div class="fake-button" v-if="!(scope.row.conPublish == 0 || scope.row.conPublish == 2)"></div> -->
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row.conId)"
                        :disabled="scope.row.conPublish == 1 || scope.row.conPublish == 2 ">编辑
                    </el-button>
                    <el-button size="mini"
                        @click="toPublish(scope.row.conId,scope.row.conTitle,scope.row.conDescribe)"
                        v-if="scope.row.conPublish == 0">发布</el-button>
                    <el-button size="mini" @click="toStop(scope.row.conId)" v-if="scope.row.conPublish == 1">停止
                    </el-button>
                    <el-button size="mini" @click="toAnalyses(scope.row.conId,scope.row.conTitle,scope.row.questionnaireType)"
                        v-if="scope.row.conPublish == 2">分析</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.conId, scope.row.conTitle)"
                        :disabled="scope.row.conPublish == 1">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: 'ManageTable',
        data() {
            return {
                tableData: [
                    {
                        "id": 4,
                        "conTitle": "测试12",
                        "conDescribe": "11你好",
                        "conDate": "2022-08-11",
                        "conPublish": 2,
                        "conOwner": 1001001,
                        "conId": 566663221,
                        questionnaireType: 0
                    },
                    {
                        "id": 5,
                        "conTitle": "测试2",
                        "conDescribe": "测试",
                        "conDate": "2022-08-11",
                        "conPublish": 2,
                        "conOwner": 1001001,
                        "conId": 781754212,
                        questionnaireType: 1
                    },
                    {
                        "id": 6,
                        "conTitle": "测试",
                        "conDescribe": "测试233",
                        "conDate": "2022-08-11",
                        "conPublish": 0,
                        "conOwner": 1001001,
                        "conId": 1,
                        questionnaireType: 1

                    },
                    {
                        "id": 7,
                        "conTitle": "测试用例",
                        "conDescribe": null,
                        "conDate": "2022-08-12",
                        "conPublish": 1,
                        "conOwner": 1001001,
                        "conId": 157105013,
                        questionnaireType: 1
                    },
                    {
                        "id": 11,
                        "conTitle": "hello",
                        "conDescribe": null,
                        "conDate": "2022-08-14",
                        "conPublish": 0,
                        "conOwner": 1001001,
                        "conId": 2080021054,
                        questionnaireType: 0
                    },
                ],
                index: 1,
                page: 1,
                search: {},
                searching: false,
            }
        },
        methods: {
            handleType(type){
                if(type == 1){
                    return 'success'
                }else {
                    return ''
                }
            },
            handleTypeText(type){
                if(type == 1){
                    return '评教问卷'
                }else{
                    return '普通问卷'
                }
            },
            tagType(conPublish) {
                if (conPublish == 0) {
                    return 'warning'
                } else if (conPublish == 1) {
                    return 'success'
                } else if (conPublish == 2) {
                    return 'info'
                }
            },
            tag(conPublish) {
                if (conPublish == 0) {
                    return '未发布'
                } else if (conPublish == 1) {
                    return '进行中'
                } else if (conPublish == 2) {
                    return '已结束'
                }
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            emitServer(page) {
                console.log('ManageTable组件的emitServer收到', page);
                let aimPage
                if (page == -1) {
                    aimPage = this.page
                } else {
                    aimPage = page
                }
                if (this.searching) {
                    var search = this.search
                }
                console.log(search);

                axios({
                    method: 'GET',
                    url: `/QuestionList/queryQuesPub/${aimPage}`,
                    withCredentials: true,
                    params: {
                        pageSize: 8,
                        ...search
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    console.log('拉取问卷列表成功', result.data);
                    this.tableData = result.data.list
                    this.$bus.$emit('totalPage', result.data.total)  //告知页码组件全部有多少条数
                }).catch((err) => {
                    this.$message('拉取问卷列表失败' + err.message)
                });
            },
            handleEdit(conId) {
                this.$router.push({
                    name: 'edit',
                    query: {
                        conId
                    }
                })
            },
            toStop(conId) {
                axios({
                    method: 'POST',
                    url: '/question/stopQuestion',
                    withCredentials: true,
                    params: {
                        conId
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.emitServer(-1)
                    this.$bus.$emit('questionnaireHandled')
                }).catch((err) => {
                    this.$message('拉取问卷列表失败' + err.message)
                });
            },
            toAnalyses(conId, conTitle,questionnaireType){
                this.$router.push({
                    name: 'analyses',
                    query: {
                        conId,
                        conTitle,
                        questionnaireType
                    }
                })
            },
            toPublish(conId, conTitle, conDescribe) {
                console.log(conId, conTitle, conDescribe);
                this.$router.push({
                    name: 'publish',
                    query: {
                        conId,
                        conTitle,
                        conDescribe
                    }
                })
            },
            handleDelete(conId,conTitle) {
                console.log('删除conId', conId);
                axios({
                    method: 'POST',
                    url: '/QuestionList/deleteQues',
                    withCredentials: true,
                    data: JSON.stringify(conId),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    if (result == 0) {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    } else {
                        this.$message({
                            message: `已删除问卷:${conTitle}`,
                            type: 'success'
                        });
                        this.emitServer(-1)
                        this.$bus.$emit('questionnaireHandled')
                    }
                }).catch((err) => {
                    this.$message({
                        message: '删除失败' + err.message,
                        type: 'info'
                    });
                });
            }
        },
        mounted() {
            this.$bus.$on('pageChange', (val) => {
                this.emitServer(val)
            })
            this.$bus.$on('search', (obj) => {
                this.searching = true
                this.search = obj
                this.emitServer(1)
            })
            this.$bus.$on('clearSearch', () => {
                this.search = {}
                this.searching = false
                this.emitServer(1)
            })
            this.emitServer(1)
        },
        beforeDestroy() {
            this.$bus.$off('pageChange')
            this.$bus.$off('search')
            this.$bus.$off('clearSearch')
        },

    }
</script>
<style scoped>

</style>